import React, { useState } from "react";
import {
  ColorPicker,
  Flex,
  Form,
  Input,
  InputNumber,
  Slider,
  Typography,
  Watermark,
} from "antd";
const { Paragraph } = Typography;
const WatermarkF = () => {
  const [form] = Form.useForm();
  const [config, setConfig] = useState({
    content: "Ant Design",
    color: "rgba(0, 0, 0, 0.15)",
    fontSize: 16,
    zIndex: 11,
    rotate: -22,
    gap: [100, 100],
    offset: undefined,
  });
  const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
  const watermarkProps = {
    content,
    zIndex,
    rotate,
    gap,
    offset,
    font: {
      color: typeof color === "string" ? color : color.toRgbString(),
      fontSize,
    },
  };
  return (
    <Flex gap="middle">
      <Watermark {...watermarkProps}>
        <Typography>
          <Paragraph>
            我是一个在文字与生活缝隙中生长的人。偏爱在清晨煮一杯手冲咖啡时观察蒸汽漫过玻璃的轨迹，也习惯在深夜用键盘敲下细碎的思考。
            学过八年钢琴，指尖还留着黑白键的温度；写过三部长篇小说，字里行间藏着对人间烟火的观察。坚信温柔与坚定从不矛盾
            —— 既能为一朵花的绽放停留，也能为认定的方向风雨兼程。
            目前在做生活方式类内容创作，喜欢把复杂的道理藏进简单的故事里。始终觉得，人最珍贵的状态是：见过世界的复杂，依然保持清澈；历经生活的打磨，依旧眼里有光。
          </Paragraph>
          <Paragraph>
            我是一个在文字与生活缝隙中生长的人。偏爱在清晨煮一杯手冲咖啡时观察蒸汽漫过玻璃的轨迹，也习惯在深夜用键盘敲下细碎的思考。
            学过八年钢琴，指尖还留着黑白键的温度；写过三部长篇小说，字里行间藏着对人间烟火的观察。坚信温柔与坚定从不矛盾
            —— 既能为一朵花的绽放停留，也能为认定的方向风雨兼程。
            目前在做生活方式类内容创作，喜欢把复杂的道理藏进简单的故事里。始终觉得，人最珍贵的状态是：见过世界的复杂，依然保持清澈；历经生活的打磨，依旧眼里有光。
          </Paragraph>
          <Paragraph>
            我是一个在文字与生活缝隙中生长的人。偏爱在清晨煮一杯手冲咖啡时观察蒸汽漫过玻璃的轨迹，也习惯在深夜用键盘敲下细碎的思考。
            学过八年钢琴，指尖还留着黑白键的温度；写过三部长篇小说，字里行间藏着对人间烟火的观察。坚信温柔与坚定从不矛盾
            —— 既能为一朵花的绽放停留，也能为认定的方向风雨兼程。
            目前在做生活方式类内容创作，喜欢把复杂的道理藏进简单的故事里。始终觉得，人最珍贵的状态是：见过世界的复杂，依然保持清澈；历经生活的打磨，依旧眼里有光。
          </Paragraph>
        </Typography>
        <img
          style={{
            zIndex: 10,
            width: "100%",
            maxWidth: 800,
            position: "relative",
          }}
          src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
          alt="img"
        />
      </Watermark>
      <Form
        style={{
          width: 280,
          flexShrink: 0,
          borderLeft: "1px solid #eee",
          paddingInlineStart: 16,
        }}
        form={form}
        layout="vertical"
        initialValues={config}
        onValuesChange={(_, values) => {
          setConfig(values);
        }}
      >
        <Form.Item name="content" label="Content">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="color" label="Color">
          <ColorPicker />
        </Form.Item>
        <Form.Item name="fontSize" label="FontSize">
          <Slider step={1} min={1} max={100} />
        </Form.Item>
        <Form.Item name="zIndex" label="zIndex">
          <Slider step={1} min={0} max={100} />
        </Form.Item>
        <Form.Item name="rotate" label="Rotate">
          <Slider step={1} min={-180} max={180} />
        </Form.Item>
        <Form.Item label="Gap" style={{ marginBottom: 0 }}>
          <Flex gap="small">
            <Form.Item name={["gap", 0]}>
              <InputNumber placeholder="gapX" style={{ width: "100%" }} />
            </Form.Item>
            <Form.Item name={["gap", 1]}>
              <InputNumber placeholder="gapY" style={{ width: "100%" }} />
            </Form.Item>
          </Flex>
        </Form.Item>
        <Form.Item label="Offset" style={{ marginBottom: 0 }}>
          <Flex gap="small">
            <Form.Item name={["offset", 0]}>
              <InputNumber placeholder="offsetLeft" style={{ width: "100%" }} />
            </Form.Item>
            <Form.Item name={["offset", 1]}>
              <InputNumber placeholder="offsetTop" style={{ width: "100%" }} />
            </Form.Item>
          </Flex>
        </Form.Item>
      </Form>
    </Flex>
  );
};
export default WatermarkF;
